<template>
  <view class="list-container">
    <!-- 搜索栏 -->
    <view class="search-bar" @click="openSearchPanel">
      <uni-icons type="search" size="18" color="#a3cfbb"></uni-icons>
      <text class="placeholder">点击展开搜索条件</text>
    </view>

    <!-- 搜索面板 -->
    <!-- 遮罩层和搜索面板 -->
    <view v-if="showSearchPanel" class="search-mask" @click="closeSearchPanel">
      <view class="search-panel" @click.stop.prevent>
        <!-- 日期选择 -->
        <view class="filter-item">
          <text class="filter-label">日期：</text>
          <picker mode="date" :value="searchDate" @change="date => searchDate = date.detail.value">
            <view class="filter-input">{{ searchDate || '不限' }}</view>
          </picker>
        </view>

        <!-- 位置搜索 -->
        <view class="filter-item">
          <text class="filter-label">位置：</text>
          <input v-model="searchCity" class="filter-input" placeholder="输入城市/位置" />
        </view>

        <!-- 天气选择 -->
        <view class="filter-item">
          <text class="filter-label">天气：</text>
          <picker @change="e => searchWeather = e.detail.value" :range="weatherOptions">
            <view class="filter-input">
              {{ searchWeather || '不限' }}
              <uni-icons type="arrowdown" size="14" color="#a3cfbb"></uni-icons>
            </view>
          </picker>
        </view>

        <!-- 温度范围 -->
        <view class="filter-item">
          <text class="filter-label">温度：</text>
          <view class="temp-range">
            <input v-model="minTemp" type="number" placeholder="最低" class="temp-input" />
            <text class="temp-separator">-</text>
            <input v-model="maxTemp" type="number" placeholder="最高" class="temp-input" />
          </view>
        </view>

        <!-- 操作按钮 -->
        <view class="action-buttons">
          <button class="btn reset" @click="resetSearch">重置</button>
          <button class="btn confirm" @click="showSearchPanel = false">确定</button>
        </view>
      </view>
    </view>
    <!-- 卡片式列表项，添加图标和柔和阴影 -->
    <view v-if="filteredDiaries.length === 0" class="empty-tips">
      <image src="/static/empty.png" class="empty-img" />
      <text class="empty-text">没有找到符合条件的日记</text>
    </view>

    <!-- 列表项改为滑动容器 -->
    <view v-for="(item, index) in filteredDiaries" :key="index" class="swipe-container">
      <!-- 滑动区域 -->
      <view class="list-item-swipe" :class="{active: item.showDelete}" @touchstart="handleTouchStart(index, $event)"
        @touchmove="handleTouchMove(index, $event)" @touchend="handleTouchEnd(index)">
        <view class="list-item" @click="goEdit(item, index)">
          <!-- 头部增加图标装饰 -->
          <view class="header">
            <uni-icons type="calendar" size="16" color="#5d907c"></uni-icons>
            <text class="date-text">{{ item.date }}</text>
            <view class="weather-info">
              <uni-icons type="location-filled" size="14" color="#5d907c"></uni-icons>
              <text class="city-text">{{ item.city }}</text>
              <text class="weather-tag">{{ item.weather }}</text>
              <text class="temp-text">{{ item.temp }}℃</text>
            </view>
          </view>

          <!-- 内容区域增加装饰线 -->
          <view class="content-box">
            <view class="decor-line"></view>
            <text class="content-text">{{ item.content }}</text>
          </view>
        </view>
      </view>

      <!-- 删除按钮 -->
      <view class="delete-btn" @tap="handleDelete(index)" :class="{show: item.showDelete}">删除</view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        diaries: [],
        showSearchPanel: false,
        searchDate: '',
        searchCity: '',
        searchWeather: '',
        minTemp: '',
        maxTemp: '',
        weatherOptions: ['晴', '多云', '小雨', '雪', '阴', '雾'],
        showSearchPanel: false,
        touchStartX: 0,
        currentTranslate: 0,
        activeIndex: -1
      }
    },
    computed: {
      filteredDiaries() {
        return this.diaries.filter(item => {
          // 日期匹配
          const dateMatch = this.searchDate ? item.date === this.searchDate : true

          // 位置模糊匹配
          const cityMatch = this.searchCity ?
            item.city.toLowerCase().includes(this.searchCity.toLowerCase()) : true

          // 天气精确匹配
          const weatherMatch = this.searchWeather ?
            item.weather === this.searchWeather : true

          // 温度范围匹配
          const temp = Number(item.temp)
          const min = this.minTemp ? Number(this.minTemp) : -Infinity
          const max = this.maxTemp ? Number(this.maxTemp) : Infinity
          const tempMatch = !isNaN(temp) && temp >= min && temp <= max

          return dateMatch && cityMatch && weatherMatch && tempMatch
        })
      }
    },
    onShow() {
      this.diaries = uni.getStorageSync('diaries') || []
      console.log("diaries", uni.getStorageSync('diaries'));
    },
    methods: {
      // 触摸事件处理
      handleTouchStart(index, e) {
        this.touchStartX = e.touches[0].clientX
        this.activeIndex = index
      },
      handleTouchMove(index, e) {
        if (this.activeIndex !== index) return

        const touchCurrentX = e.touches[0].clientX
        const deltaX = touchCurrentX - this.touchStartX

        // 限制最大滑动距离为删除按钮宽度
        if (deltaX < -80) {
          this.filteredDiaries[index].translateX = -80
        } else if (deltaX > 0) {
          this.filteredDiaries[index].translateX = 0
        } else {
          this.filteredDiaries[index].translateX = deltaX
        }
      },
      handleTouchEnd(index) {
        if (this.filteredDiaries[index].translateX < -40) {
          this.filteredDiaries[index].translateX = -80
          this.filteredDiaries[index].showDelete = true
        } else {
          this.filteredDiaries[index].translateX = 0
          this.filteredDiaries[index].showDelete = false
        }
      },

      // 删除处理
      handleDelete(index) {
        uni.showModal({
          title: '确认删除',
          content: '确定要删除这条日记吗？',
          success: res => {
            if (res.confirm) {
              this.diaries.splice(index, 1)
              uni.setStorageSync('diaries', this.diaries)
              this.resetSwipeStatus()
            }
          }
        })
      },

      resetSwipeStatus() {
        this.filteredDiaries.forEach(item => {
          item.translateX = 0
        })
        this.activeIndex = -1
      },
      openSearchPanel() {
        this.showSearchPanel = true
      },
      closeSearchPanel() {
        this.showSearchPanel = false
      },
      onPullDownRefresh() {
        this.diaries = uni.getStorageSync('diaries') || []
        uni.stopPullDownRefresh()
      },
      resetSearch() {
        this.searchDate = ''
        this.searchCity = ''
        this.searchWeather = ''
        this.minTemp = ''
        this.maxTemp = ''
      },
      goEdit(item, index) {
        uni.navigateTo({
          url: `/pages/diary/edit?data=${encodeURIComponent(JSON.stringify({ ...item, mode: 'edit', index }))}`
        })
      }
    }
  }
</script>

<style lang="scss">
  .list-container {
    background-color: #f8f9fa;
    min-height: 100vh;
    padding: 15px;
  }

  .swipe-container {
    position: relative;
    overflow: hidden;
    margin-bottom: 15px;
    border-radius: 12px; // 添加与列表项相同的圆角
    background: transparent;
  }

  .list-item-swipe {
    transition: transform 0.3s ease;
    position: relative;
    z-index: 2; // 提高层级覆盖删除按钮
    background: white;
    border-radius: 12px;

    &.active {
      transform: translateX(-80px);
    }
  }

  .delete-btn {
    position: absolute;
    right: -80px; // 初始隐藏在容器外
    top: 0;
    bottom: 0;
    width: 80px;
    background: #ff5a5f;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-radius: 0 12px 12px 0;
    transition: right 0.3s ease; // 添加过渡效果

    &.show {
      right: 0;
    }
  }


  /* 搜索栏样式 */
  .search-bar {
    background: white;
    border-radius: 25px;
    padding: 12px 20px;
    margin: 10px 15px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 8px rgba(163, 207, 187, 0.1);

    .placeholder {
      color: #a3cfbb;
      margin-left: 10px;
      font-size: 14px;
    }
  }

  .search-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  /* 调整搜索面板样式 */
  .search-panel {
    background: white;
    border-radius: 12px;
    margin-top: 60px;
    /* 根据搜索栏位置调整 */
    width: 90%;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(163, 207, 187, 0.15);
    position: relative;
    z-index: 1000;
  }

  .filter-item {
    display: flex;
    align-items: center;
    margin: 12px 0;

    .filter-label {
      color: #5d907c;
      font-size: 14px;
      width: 60px;
    }

    .filter-input {
      flex: 1;
      background: #f5faf8;
      border-radius: 8px;
      padding: 8px 12px;
      color: #56776a;
      font-size: 14px;
    }
  }

  .temp-range {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;

    .temp-input {
      flex: 1;
      background: #f5faf8;
      border-radius: 8px;
      padding: 8px;
      text-align: center;
    }

    .temp-separator {
      color: #a3cfbb;
    }
  }

  .action-buttons {
    display: flex;
    gap: 15px;
    margin-top: 20px;

    .btn {
      flex: 1;
      height: 36px;
      line-height: 36px;
      border-radius: 18px;
      font-size: 14px;

      &.reset {
        background: #f5faf8;
        color: #a3cfbb;
      }

      &.confirm {
        background: linear-gradient(135deg, #a3cfbb, #8abfaa);
        color: white;
      }
    }
  }

  .empty-tips {
    text-align: center;
    padding: 50px 0;

    .empty-img {
      width: 100px;
      height: 100px;
      opacity: 0.6;
    }

    .empty-text {
      display: block;
      color: #a3cfbb;
      margin-top: 15px;
    }
  }

  .list-item {
    background: white;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 2px 8px rgba(163, 207, 187, 0.1);
    transition: all 0.3s;
    min-height: 110px; // 设置最小高度
    box-sizing: border-box;

    &:active {
      transform: translateY(2px);
      box-shadow: 0 1px 4px rgba(163, 207, 187, 0.2);
    }
  }

  .header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;

    .date-text {
      color: #5d907c; // 深一级的主色系
      font-size: 15px;
      margin-left: 8px;
    }
  }

  .weather-info {
    flex-grow: 1;
    display: flex;
    align-items: center;
    margin-left: 15px;

    .city-text {
      color: #7aa898; // 中间调绿色
      font-size: 13px;
      margin: 0 6px;
    }

    .weather-tag {
      background: #e3f1ea; // 浅绿色背景
      color: #5d907c;
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 4px;
      margin-right: 8px;
    }

    .temp-text {
      color: #9abfae; // 柔和的灰绿色
      font-size: 13px;
    }
  }

  .content-box {
    position: relative;
    padding-left: 20px;

    .decor-line {
      position: absolute;
      left: 0;
      top: 2px;
      bottom: 2px;
      width: 3px;
      background: #c3e4d4; // 浅装饰线
      border-radius: 2px;
    }

    .content-text {
      color: #56776a; // 深灰绿色
      font-size: 14px;
      line-height: 1.6;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
  }

  /* 空状态提示 */
  .list-container:empty::after {
    content: "还没有日记哦～\n点击右下角+开始记录";
    color: #a3cfbb;
    text-align: center;
    display: block;
    padding: 50px 20px;
    white-space: pre-wrap;
  }
</style>